import React from 'react';
import css from './index.less';
import { observer } from 'mobx-react';
import BaseConfig from 'modules/common/config';

import Group from 'components/config/group';
import Bull from 'components/config/zoho/bull';
import Check from 'components/config/zoho/check';
import Redirect from 'components/config/zoho/redirect';
import Icon from 'components/icon';
import Level from 'components/config/zoho/level';
import * as CONST from 'common/const';
import ScrollArea from 'components/scrollArea';

@observer
export default class VideoConfig extends BaseConfig {
  title = '视频设置';

  // 属性
  renderAttrConfig() {
    const { mod } = this.props;
    const groupProps = {
      defaultActiveKey: [0, 1, 2, 3],
      list: [
        {
          title: '视频链接',
          children: (
            <Redirect
              value={mod.src}
              onChange={value => {
                mod.update('src', value);
              }}
            />
          )
        },
        {
          title: '视频宽高',
          children: (
            <div>
              <Bull key="0" title="视频宽度">
                <input className={css.show} value={mod.width} type="number" onChange={ val => {
                  mod.update('Width', val);
                }}/>
                <span className={css.label}>PX</span>
                <Icon type="icon-emoji"/>
              </Bull>
              <Bull key="1" title="视频高度">
                <input className={css.show} value={mod.height} type="number" onChange={ val => {
                  mod.update('height', val);
                }}/>
                <span className={css.label}>PX</span>
                <Icon type="icon-emoji"/>
              </Bull>
            </div>
          )
        },
        {
          title: '视频设置',
          children: (
            <div>
              <Check
                label="是否添加控制组件"
                myKey={mod.isControls}
                click={() => {
                  mod.controls();
                }}
              />
              <Check
                label="是否循环播放"
                myKey={mod.isLoop}
                click={() => {
                  mod.loop();
                }}
              />
              <Check
                label="是否自动播放"
                myKey={mod.isAutoplay}
                click={() => {
                  mod.autoplay();
                }}
              />
            </div>

          )
        },
        {
          title: '元素层级顺序',
          children: (
            <Level mod={mod}/>
          )
        },
      ]
    };
    return (
      <ScrollArea
        style={{
          maxHeight: window.innerHeight - CONST.SIMULATOR_MARGIN_TOP - CONST.HEADER_HEIGHT - 50 - 44 - 50,
        }}
      >
        <Group {...groupProps}/>
      </ScrollArea>
    );
  }
}
